<template>
  <div class="app">
    <router-view @change='changeIndex'></router-view>
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item replace to="/layout/index">
        <template>
          <i class="iconfont icon-elment"></i>
          <div>外卖</div>
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/layout/search" icon="search"
        >搜索</van-tabbar-item
      >
      <van-tabbar-item icon="description">订单</van-tabbar-item>
      <van-tabbar-item replace to="/layout/personal" icon="contact"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    onChange(index) {
      console.log(index);
      this.active=index
    },
    changeIndex(index){
      console.log(35);
      this.active=index
    }
  },
};
</script>

<style lang="less" scoped>
/deep/.van-tabbar-item__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .iconfont {
    font-size: 20px;
    margin-bottom: 5px;
  }
}
</style>